$(window).resize(function () {
  $(".home_categorias").width(937 * $(this).width() / 1903);
  $(".index-categorias-shade").height(620 * $(this).width() / 1903)
  $(".index-categorias-shade3").height(554 * $(this).width() / 1903)
  // $(".mask-warper").width(554 * $(this).width() / 1903).height(380 * $(this).width() / 1903)
})

this.p = $(this).width() / 1903;

function resize() {
  $(".home_categorias").width(945 * this.p)
  $(".index-categorias-shade").height(625 * this.p)
  $(".index-categorias-shade3").height(554 * this.p)
  $(".index-categorias-shade3").height(554 * this.p)
  // console.log(this.p,"height",$(".index-categorias-shade3").height(),$(".index-categorias-shade3"))
  // console.log($(".index-categorias-shade3").height())
  // $(".mask-warper").width(554 * this.p).height(380 * this.p)
}

$(function () {
  new WOW().init();
  // 首页轮播图
  function initSwiper() {
    return new Swiper('.swiper-container', {
      loop: true,
      speed: 500,
      autoplay: {
        delay: 75000000,
        disableOnInteraction: false,
      },
      on: {
        slideChange: function (e) {
          // console.log(this.activeIndex)
        },
        slideChangeTransitionEnd: function () {
          // console.log("第几个silder",this.activeIndex)
        },
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })
  }

  function getBanner2() {
    (getData(2, getBannerSuccess))
  }

  function getBanner3() {
    (getData(3, getBannerSuccess))
  }

  function getBanner4() {
    (getData(4, getBannerSuccess))
  }

  function getBanner5() {
    (getData(5, getBannerSuccess))
  }

  getBanner = () => {
    getBanner2()
    getBanner3()
    getBanner4()
    getBanner5()
    getBanner6()
  }

  function getBanner6() {
    $.ajax({
      url: `${HOST}/Index/index/banner`,
      type: "post",
      data: {
        id: 6
      },
      success: function (res) {
        renderBanner6(res.data)
      }
    })
  }
// `<p>STEP INTO ÅRHUS</p>
// <div class="wow slideInLeft" data-wow-duration="2s">${e[i].ftitle}</div>
// <div class="wow slideInUp" data-wow-duration="1.4s">${e[i].ltitle}</div>
// <div class="wow slideInRight" data-wow-duration="2s">新品上市</div>`
  // 渲染轮播图
  function renderBanner6(e) {
    var str = ``
    for (var i = 0; i < e.length; i++) {
      str += `<div class="swiper-slide">
        <a href="">
          <img src="${HOST+e[i].src}">
          <section class="mask-warper">
          <div class="banner-info-box">
            <div>${e[i].ftitle}</div>
            <div>${e[i].ltitle}</div>
            <a href="" class="learn-more">shop now</a>
            </div>
            
          </section>
        </a>
      </div>`
    }
    $(".swiper-wrapper").html(str)
    initSwiper()
  }
  getBanner()

  /* 
  第4 5个banner的回调
  */
  function getBannerSuccess(e, num) {
    switch (num) {
      case 2:
        renderBanner23(e, num)
        break;
      case 3:
        renderBanner23(e, num)
        break;
      default:
        var res = e[0];
        var str = `<div class="home_categorias-img-box">
        <img src="${HOST+res.src}" alt="">
      </div>
      <div class="home_categorias-txt">${res.ftitle}</div>
      <div class="index-categorias-shade-txt">${res.ltitle}</div>
      <div class="index-categorias-shade3"></div>`
        $(".home_categorias").eq(num - 2).html(str)
        break;
    }
  }

  // 渲染第23个
  function renderBanner23(e, num) {
    e = e[0];
    var str = `<a href="./goods-list.html?gsex=${num==2?0:1}">
    <div class="home_categorias">
      <div class="home_categorias-img-box"><img src="${HOST+e.src}" alt=""></div>
      <div class="home_categorias-txt">${e.ftitle}</div>
      <div class="index-categorias-shade-txt">${e.ltitle}</div>
      <div class="index-categorias-shade"></div>
    </div>
  </a>`;

    $("#home_categorias").children("div").eq(num - 2).html(str)
    if ($(this).width() > 768 && $(this).width()<1903) {
      setTimeout(()=>{
        resize()
      },100)
    }else if($(this).width()>1920){
      setTimeout(()=>{
        resize()
      },100)
    }
  }

  function getData(requestData, succCallback, errorCallback) {
    /*requestPath：请求路径
     requestData：请求参数，默认为空
     requestType：请求方式("POST" 或 "GET")， 默认为 "GET"
     succCallback：请求成功回调函数
     errorCallback：请求失败回调函数
     dataType：预期服务器返回的数据类型， 默认为 JSON */
    requestData = requestData || {}
    requestType = 'GET'
    dataType = 'JSONP'
    $.ajax({
      url: "" + HOST + "/Index/index/banner", //请求地址
      type: requestType, //请求类型
      data: {
        id: requestData
      }, //请求数据
      success: function (res) {
        if (res.success == '1') { //res.message不是唯一，也有可能是res.code 需结合项目实际场景来写入判断条件
          if (succCallback) {
            succCallback(res.data, requestData) //返回OK回调函数，将返回的数据res传入到该回调函数中
          }
        } else {
          if (errorCallback) {
            errorCallback(res) //返回不是OK时回调函数，将返回的数据res传入到该回调函数中
          }
        }
      },
      error: function (e) {
        console.log("加载错误", e)
      }
    })
  }

})